<template>
  <div class="box">
    <h2>Son2 子组件 {{ count }}</h2>
    从vuex中获取的值:<label></label>
    <br />
    <button>值 - 1</button>
    <button @click="changeCount(888)">改值</button>
    <button @click="setAsyncCount(999)">一秒后改成999</button>

    <hr />
    <!-- 使用mapState访问子模块数据 -->
    <div>{{ user.userInfo.name }}</div>
    <div>{{ userInfo.name }}</div>

    <div>{{ theme }}</div>
    <!-- 访问子模块中的gett -->
    <div>{{ UpperCaseName }}</div>

    <button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
    <button @click="setTheme('skyblue')">更新主题</button>
    <hr />
    <button @click="setUserSecond({ name: 'xiaoli', age: 80 })">
      一秒后更新信息
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Son2Com",
  computed: {
    //提取属性
    ...mapState(["count", "user"]),
    ...mapState("user", ["userInfo"]),
    ...mapState("setting", ["theme", "desc"]),
    ...mapGetters("user", ["UpperCaseName"]),
  },
  methods: {
    //提取方法
    ...mapMutations(["changeCount"]),
    ...mapActions(["setAsyncCount"]),
    ...mapMutations("setting", ["setTheme"]),
    ...mapMutations("user", ["setUser"]),
    ...mapActions("user", ["setUserSecond"]),
  },
};
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>